<template>
    <div class="user-manage">
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="searchForm" class="search-form">
            <div class="item-group">
                <el-form-item label="捐赠时间:">
                    <el-date-picker v-model="searchForm.donationTime" type="date" placeholder="请选择捐赠时间" />
                </el-form-item>
                <el-form-item label="募捐机构ID:">
                    <el-input v-model="searchForm.agencyId" placeholder="请输入募捐机构ID" />
                </el-form-item>
                <el-form-item label="募捐机构名称:">
                    <el-input v-model="searchForm.agencyName" placeholder="请输入募捐机构名称" />
                </el-form-item>
                <el-form-item label="募捐项目ID:">
                    <el-input v-model="searchForm.fundraisingProjectsId" placeholder="请输入募捐项目ID" />
                </el-form-item>
                <el-form-item label="募捐项目名称:">
                    <el-input v-model="searchForm.fundraisingProjectsName" placeholder="请输入募捐项目名称" />
                </el-form-item>
                <el-form-item label="捐赠者ID:">
                    <el-input v-model="searchForm.donatorId" placeholder="请输入捐赠者ID" />
                </el-form-item>
                <el-form-item label="捐赠者用户名:">
                    <el-input v-model="searchForm.donatorUsername" placeholder="请输入捐赠者用户名" />
                </el-form-item>
            </div>
            <div class="btn-group">
                <el-button type="primary" @click="getDonationRecordsList" size="small">
                    <el-icon><Search /></el-icon>
                    搜索
                </el-button>
            </div>
        </el-form>
        <!-- 表格数据 -->
        <el-table 
            :data="tableData" 
            style="width: 100%" 
            border 
            :header-cell-style="{ background: 'rgb(216,231,246)' }" 
            max-height="500"
        >
            <el-table-column prop="donationRecordsId" label="捐赠记录ID" width="100" />
            <el-table-column prop="agencyId" label="募捐机构ID" width="100" />
            <el-table-column prop="agencyName" label="募捐机构名称" />
            <el-table-column prop="fundraisingProjectsId" label="募捐项目ID" width="100" />
            <el-table-column prop="fundraisingProjectsName" label="募捐项目名称" />
            <el-table-column prop="donatorId" label="捐赠者ID" width="100" />
            <el-table-column prop="donatorUsername" label="捐赠者用户名" />
            <el-table-column prop="donationAmount" label="捐赠金额" width="100" />
            <el-table-column prop="donationTime" label="捐赠时间" :formatter="handleFormatDate" />
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next,jumper"
                :page-sizes="[10, 50, 100]"
                :total="total"
                v-model:page-size="pageSize"
                v-model:current-page="currentPage"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { adminApi } from '../../api/app';
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { handleFormatDate } from './ts/common.js';
import { dayjs } from 'element-plus';
  
/** 搜索表单 */
const searchForm = ref({
    donationTime: null,
    agencyId: null,
    agencyName: null,
    fundraisingProjectsId: null,
    fundraisingProjectsName: null,
    donatorId: null,
    donatorUsername: null,
});
/** 表格数据 */
const tableData = ref([])
/** 数据总数 */
const total = ref(0);
/** 当前页码 */
const currentPage = ref(1);
/** 每页显示条数 */
const pageSize = ref(10);
  
// 初始加载
onMounted(() => {
    // 获取捐赠信息列表
    getDonationRecordsList();
});
  
/** 获取捐赠信息列表 */
const getDonationRecordsList = () => {
    const time = searchForm.value.donationTime ? dayjs(searchForm.value.donationTime).format('YYYY-MM-DD') : null;
    adminApi.getDonationRecords({ 
        pageNum: currentPage.value, 
        pageSize: pageSize.value, 
        ...searchForm.value,
        donationTime: time
    }).then((res: any) => {
        if (res) {
            tableData.value = res;
            total.value = res.length;
        }
    });
};

/** 表格分页大小改变 */
const handleSizeChange = (val: number) => {
    pageSize.value = val;
    getDonationRecordsList();
};
  
/** 表格页码改变 */
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    getDonationRecordsList();
};
</script>
  
<style scoped lang="less">
@import "./css/tableForm.less";
</style>